<template>
	<div>
		<div class="container-fluid px-0">
			<div class="row gx-0 min-vh-100">
				<div class="col-md-9 col-lg-6 col-xl-4 px-5 d-flex align-items-center shadow">
					<div class="w-100 py-5">
						<div class="text-center"><img class="img-fluid mb-4" src="@/assets/img/brand/brand-1.svg"
								style="max-width: 6rem;">
							<h1 class="h4 text-uppercase mb-5">Welcome Back</h1>
						</div>
						<div class="mb-3">
							<label class="form-label">Email Address</label>
							<input class="form-control" name="loginUsername" type="email" autocomplete="off">
						</div>
						<div class="mb-4">
							<div class="row">
								<div class="col">
									<label class="form-label">Password</label>
								</div>
							</div>
							<input class="form-control" name="loginPassword" type="password">
						</div>
						<div class="form-check mb-4">
							<input class="form-check-input" id="remember" type="checkbox">
							<label class="custom-control-label" for="remember">Remember this device</label>
						</div>
						<!-- Submit-->
						<div class="d-grid mb-5">
							<button class="btn btn-primary text-uppercase" @click="doLogin"> Sign in</button>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-lg-6 col-xl-8 d-none d-md-block login-bg">
					<!-- 背景图片-->
					<div class="bg-cover h-100"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		methods:{
			doLogin(){
				this.$router.push('/home')
			}
		} 
	}
</script>

<style scoped="scoped">
	.login-bg {
		background-image: url('../../assets/img/photos/victor-ene-1301123-unsplash.jpg');
	}
</style>
